<!-- 视图层 -->
<template>
    <div>
       <!-- <ul>
          <li v-for="(item,index) in prolist" :key="index">
              <img :src="item.img1" alt="">
              <div>
                  <p>{{ item.proname }}</p>
                  <span>{{ item.originprice }}</span>
              </div>
          </li>
       </ul> -->
        <van-grid center column-num="2" gutter="10px">
        <van-grid-item v-for="(item,index) in prolist" 
         :key="index" 
        >
         <van-image
         :src="item.img1"
         />
         <span>{{  item.proname }}</span>
        </van-grid-item>
        </van-grid>
    </div>
  </template>
  
  <!-- 逻辑层 -->
  <script setup>
  import { getProList } from '@/api/home'
  import { onMounted,ref } from 'vue';
  
  let prolist = ref([]);
  
  onMounted(()=>{
      getProList().then(({data:res})=> {
          prolist.value = res.data
          console.log(prolist.value)
      })
      // getSeckilllist().then((res) =>{
      //     console.log(res.data)
      // })
  })
  
  
  </script>
  
  
  <!-- 样式层 -->  
  <style scoped>
  .van-grid{
    margin-top: 20px;
  }
  .van-grid-item{
    border-radius: 12px;
  }
  span{
    height: 70px;
    font-size: 22px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
  }
  </style>
  